<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head">
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.3/dist/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.3/dist/bootstrap-table.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
    <script src="//cdn.staticfile.org/layui/2.9.7/layui.js"></script>
    <style>
        /* 使右侧导航项靠右 */
        .layui-nav-right {
            float: right;
        }

        /* 使右侧导航项靠右 */
        .layui-nav-right {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:fragment="nav">
        <li class="layui-nav-item"><a href="/index" style="font-size: large;">图书借阅系统</a></li>
        <li class="layui-nav-item"><a href="/admin/index">书籍一览</a></li>
        <li class="layui-nav-item"><a href="/admin/users">用户管理</a></li>
        <li class="layui-nav-item"><a href="/admin/records">借阅记录</a></li>
        <!-- 右侧导航项 -->
        <li class="layui-nav-item layui-nav-right" id="loginBtn"><a href="/login">登录</a></li>
        <li class="layui-nav-item layui-nav-right" id="logoutBtn"><a href="/">退出</a></li>
        <li class="layui-nav-item layui-nav-right" >
            <img src="http://cdn.qiniu.liyansheng.top/img/avatar.png" class="layui-nav-img">
        </li>


        <script>
            $(function () {
                if (localStorage.getItem('username')) {
                    $('#loginBtn').hide();
                    $('#logoutBtn').show()
                } else {
                    $('#loginBtn').show();
                    $('#logoutBtn').hide()
                }
            })
            function showRecotd() {
                var username = localStorage.getItem("username");
                window.location.href = "/records/queryByUsername?username=" + username;
            }
        </script>
    </ul>

    <div>
        <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
            <h1 style="padding: 50px">📚图书一览</h1>

        </div>
        <!-- 新版 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="toolbar">
                    <button id="addBtn" class="btn btn-primary">
                        <i class="bi bi-plus-square"></i> 新增
                    </button>
                </div>
                <table id="table" data-toolbar="#toolbar" data-search="true" data-show-refresh="true"
                    data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
                    data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
                    data-click-to-select="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2"
                    data-show-pagination-switch="true" data-pagination="true" data-id-field="id"
                    data-page-list="[5,10, 25, 50, 100, all]" data-show-footer="true" data-side-pagination="client"
                    data-url="/book/selectAll" data-response-handler="responseHandler">
                </table>
            </div>
        </div>
    </div>



    <script>
        $('#addBtn').click(function () {
            layer.open({
                type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
                shadeClose: true,
                title: '新增图书',
                area: ['700px', 'auto'],
                content: `
                <div style="margin: 10px;">
        <form class="layui-form" action="" lay-filter="testform">
            <div class="layui-form-item">
                <label class="layui-form-label">书名</label>
                <div class="layui-input-block">
                    <input type="text" name="bName" value="" required lay-verify="required" placeholder="请输入书名"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-block">
                    <input type="text" name="bPrice" value="" required lay-verify="required" placeholder="请输入价格"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-block">
                    <input type="text" name="bSize" value="" required lay-verify="required" placeholder="请输入库存"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-block">
                    <input type="text" name="bAuthor" value="" required lay-verify="required" placeholder="作者"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出版社</label>
                <div class="layui-input-block">
                    <input type="text" name="bPress" value="" required lay-verify="required" placeholder="请输入出版社"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>`,
                success: function (layero) {

                }
            });
        })

        layui.use(['layer'], function (args) {
            var layer = layui.layer;
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                $.post("/book/add", data.field, function (data) {
                    if (data.code === "200") {
                        layer.msg("添加图书成功！");
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        layer.msg(data.msg);
                    }
                })
                return false;
            });

            form.on('submit(formDemo2)', function (data) {
                $.post("/book/update", data.field, function (data) {
                    if (data.code === "200") {
                        layer.msg("修改图书成功！");
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        layer.msg(data.msg);
                    }
                })
                return false;
            });
        });

        // 获取组件
        var $table = $('#table')
        var $remove = $('#remove')

        // 处理远程响应的数据，可以指定要在表格显示的数据
        function responseHandler(res) {
            return res.data;
        }

        function operateFormatter(value, row, index) {
            return [
                '<button type="button" class="btn btn-outline-primary edit btn-sm" title="编辑">',
                '<i class="bi bi-pencil"></i> 编辑',
                '</button> ',
                '<button type="button" class="btn btn-outline-danger remove btn-sm" title="删除">',
                '<i class="bi bi-trash"></i> 删除',
                '</button>'
            ].join('');
        }

        // 按钮点击事件
        window.operateEvents = {
            // 移除
            'click .remove': async function (e, value, row, index) {
                layer.confirm('确定要删除这本书吗？', {
                    btn: ['是的', '取消']
                }, function () {
                    $.get("/book/delete/" + row.bname, function (data) {
                        if (data.code === "200") {
                            layer.msg('删除成功');
                            refresh();
                        }
                    })
                }, function () {
                });
            },

            'click .edit': async function (e, value, row, index) {
                window.location.href="/book/"+row.id;
            }
        }


        // 表格初始化
        function initTable() {
            $table.bootstrapTable('destroy').bootstrapTable({
                exportDataType: 'all',
                height: 550,
                locale: $('#locale').val(),
                columns: [
                    [
                        {
                            title: '书籍ID',
                            field: 'id',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        },
                        {
                            title: '书名',
                            field: 'bname',
                            sortable: true,
                            align: 'center'
                        },
                        {
                            title: '价格',
                            field: 'bprice',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        },
                        {
                            title: '上架时间',
                            field: 'btime',
                            sortable: true,
                            align: 'center'
                        },
                        {
                            title: '库存',
                            field: 'bsize',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        },
                        {
                            title: '作者',
                            field: 'bauthor',
                            sortable: true,
                            align: 'center'
                        },
                        {
                            title: '出版社',
                            field: 'bpress',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,

                        },
                        {
                            field: 'operate',
                            title: '操作',
                            align: 'center',
                            clickToSelect: false,
                            events: window.operateEvents,
                            formatter: operateFormatter
                        }
                    ]
                ]
            })
        }

        $(function () {
            initTable();
            $('#locale').change(initTable)
        })
        function refresh() {
            $table.bootstrapTable('refresh');
        }
    </script>

</body>

</html>